<template>
  <view class="card-good" :class="details.surplus_num == 0 ? 'gray' : ''">
    <block v-if="!skeleton">
      <view class="img-card">
        <!-- 图片展示 -->
        <u-image
          mode="widthFix"
          width="100%"
          height="100%"
          :src="details.goods_image || ''"
          :lazy-load="true"
        ></u-image>
        <!-- 额外 文字显示 -->
        <view class="desc">
          {{ details.surplus_num }} / {{ details.num }}
          <view class="tag yfs-good" :class="level[details.level].style">
            <view class="font">
              {{ details.reward_name
              }}<text class="span" :style="level[details.level].value">赏</text>
            </view>
          </view>
        </view>
      </view>
      <view class="info">
        <!-- 标题 -->
        <view class="title nowrap_ellipsis">
          {{ details.goods_name }}
        </view>
        <!-- 价格 概率 -->
        <view class="bottom">
          <view class="price">参考价￥{{ price }} </view>
          <view class="odds" v-if="details.level != 8 && probability"
            ><!---概率-->{{ details.probability }}%
          </view>
        </view>
      </view>
    </block>
    <!-- 骨架屏 -->
    <block v-else>
      <view class="img-card">
        <view class="cover skeleton">
          <image class="skeleton-star" :src="star" />
          <image class="skeleton-star" :src="star" />
        </view>
        <!-- 额外 文字显示 -->
        <view class="desc">
          <view class="desc-ske"> </view>
          <view class="tag yfs-good">
            <view class="font"></view>
          </view>
        </view>
      </view>
      <view class="info">
        <!-- 标题 -->
        <view class="title nowrap_ellipsis"> ****** </view>
        <!-- 价格 概率 -->
        <view class="bottom">
          <view class="price"> **** </view>
          <view class="odds"> *** </view>
        </view>
      </view>
    </block>
  </view>
</template>
<script>
import star from '../img/4.png';

import { GOOD_TYPE_LIVE } from '../portrait/portait_config';
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: {},
  props: {
    details: {
      type: Object,
      default: () => ({}),
    },
    skeleton: {
      type: Boolean,
      default: false,
    },
    probability: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      show: false,
      star,
      level: GOOD_TYPE_LIVE,
    };
  },
  // 计算属性 适配者模式
  computed: {
    price() {
      let num = this.details?.original_price || 0;
      return parseInt(Number(num));
    },
    text() {
      let str = this.details?.reward_name || '';
      return str.replace('赏', '<span style=" font-size: 10px;">赏</span>');
    },
  },
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   * 在实例初始化之前被调用
   */
  beforeCreate() {},
  // 在实例创建完成后被立即调用
  created() {},
  // 在挂载开始之前被调用
  beforeMount() {},
  // 挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用nextTick
  mounted() {},
  // 数据更新时调用，发生在虚拟 DOM 打补丁之前
  beforeUpdate() {},
  // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
  updated() {},
  // 实例销毁之前调用。在这一步，实例仍然完全可用
  beforeDestroy() {},
  // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
  destroyed() {},
  methods: {
    imgLoad() {
      this.show = true;
    },
  },
};
</script>
<style lang="scss" scoped>
@import 'static/style/prize.scss';
.card-good.gray {
  filter: grayscale(100%);
}
.card-good {
  overflow: hidden;
  border-radius: 8rpx;
  background-color: #fff;
  width: 88rpx;
  height: 118rpx;
  box-shadow: 0 3rpx 5rpx 1rpx rgba(0, 0, 0, 0.09);

  .img-card {
    position: relative;
    width: 100%;
    height: 84rpx;
    overflow: hidden;
    .cover.skeleton {
      position: relative;
      width: 88rpx;
      height: 84rpx;
      background-image: radial-gradient(
        rgba(73, 137, 146, 1),
        rgba(10, 39, 53, 1) 60%
      );

      .skeleton-star:nth-child(2) {
        position: absolute;
        bottom: 30rpx;
        right: 20rpx;
        animation: scale-filter-center 2s linear 1.4s infinite alternate-reverse
          none;
      }
      .skeleton-star:nth-child(1) {
        position: absolute;
        top: 15rpx;
        left: 15rpx;
        animation: scale-filter-center 2s linear 0s infinite alternate-reverse
          none;
      }
      .skeleton-star {
        width: 20rpx;
        height: 16rpx;
      }
    }
    .cover {
      width: 100%;
    }
    .desc {
      position: absolute;
      bottom: 0;
      left: 0;
      padding: 0 8rpx;
      width: 100%;
      height: 11rpx;
      color: #fff;
      font-size: 8rpx;
      font-weight: 600;
      line-height: 11rpx;
      background: rgba(0, 0, 0, 0.49);

      .desc-ske {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 10rpx;
        width: 40rpx;
        height: 11rpx;
        background: #eee;
      }
      .tag {
        position: absolute;
        bottom: 0;
        right: 0;

        display: flex;
        justify-content: center;
        align-items: center;

        line-height: 1;
        width: 27rpx;
        height: 13rpx;
        font-size: 9rpx;
        border-radius: 8rpx 0rpx 0rpx 0rpx;
        background-color: #eee;

        .font {
          line-height: 1;
          font-size: 12rpx;
          .span {
            font-size: 10rpx;
          }
        }
      }
    }
  }

  .info {
    padding: 4rpx;
  }

  .title {
    width: 100%;
    font-size: 12rpx;
    line-height: 12rpx;
    font-weight: 800;
    color: #000000;
  }

  .bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 5rpx;
    .price,
    .odds {
      font-size: 9rpx;
      font-weight: bold;
      color: #8f8f8f;
    }
    .odds {
      font-size: 8rpx;
    }
  }
}
</style>
